<template>
  <div class="purchasenote_add">
    <el-main>
      <el-tabs value="first" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <!-- 顶部选项 -->
          <el-row :gutter="10">
            <el-col :span="2">
              <div style="margin-top: 7px;text-align: right;">
                <span style="color: red;">*</span>类型
              </div>
            </el-col>
            <el-col :span="3">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词"
                :remote-method="remoteMethod" :loading="loading">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <div style="margin-top: 7px;text-align: right;">
                仓库
              </div>
            </el-col>
            <el-col :span="3">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <div style="margin-top: 7px;text-align: right;">
                <span style="color: red;">*</span>计划交货日期
              </div>
            </el-col>
            <el-col :span="3">
              <el-date-picker v-model="value1" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-col>
            <el-col :span="2">
              <div style="margin-top: 7px;text-align: right;">
                排序方式
              </div>
            </el-col>
            <el-col :span="3">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>

          <div style="margin: 5px 0;">
            单据来源:
          </div>
          <el-row>
            <el-col :span="3">
              <div
                style="text-align: center; font-size: 13px; line-height: 30px; color: #1890ff;border-bottom: 2px solid #1890ff;">
                采购单商品清单</div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="border-top: 1px solid #d8d8d8; padding-top: 10px;">
            <el-col :span="1">
              <div style="margin-top: 7px; text-align: right;">商品</div>
            </el-col>
            <el-col :span="5">
              <el-input v-model="input" placeholder="请选商品名/助记码/编码/别名/关键字"></el-input>
            </el-col>
            <el-col :span="3">
              <div style="margin-top: 7px; text-align: right;">数量</div>
            </el-col>
            <el-col :span="5">
              <el-input v-model="input" placeholder="请输入数量"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary">添加</el-button>
            </el-col>
          </el-row>
          <div style="text-align: right;">
            <el-button @click="drawer = true">表头设置</el-button>
          </div>
          <el-drawer title="选择表头显示列" size="15%" :visible.sync="drawer" :direction="direction"
            :before-close="handleClose">
            <div v-for="(res,i) in tablecheckAll" style="padding: 10px; line-height: 30PX;">
               <el-checkbox :disabled="tableforbid.indexOf(res) !== -1" v-model="tablecheckeds" :label="res">{{res}}</el-checkbox>
            </div>
            {{tablecheckeds}}
          </el-drawer>

          <el-table   border :data="tableData" style="width: 100%;margin-bottom:10px">
            <el-table-column v-if="tablecheckeds.indexOf('序号')>-1" prop="date" label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column  v-if="tablecheckeds.indexOf('商品图片')>-1" prop="name" label="商品图片" width="120">
              <template slot-scope="scope">
                <img :src="scope.row.path" alt="购物车">
                <!-- {{scope.row}} -->
              </template>
            </el-table-column>
            <el-table-column prop="province"  v-if="tablecheckeds.indexOf('商品')>-1"  label="商品">
            </el-table-column>
            <el-table-column prop="province" v-if="tablecheckeds.indexOf('单位')>-1"  label="单位">
            </el-table-column>
            <el-table-column prop="province"  v-if="tablecheckeds.indexOf('近一次采购')>-1" label="近一次采购">
            </el-table-column>
            <el-table-column prop="city"   v-if="tablecheckeds.indexOf('采购询价')>-1"  label="采购询价" width="120">
            </el-table-column>
            <el-table-column prop="address" v-if="tablecheckeds.indexOf('市场参考价')>-1"   label="市场参考价" width="100">
            </el-table-column>
            <el-table-column prop="zip" v-if="tablecheckeds.indexOf('采购价')>-1"   label="采购价" width="120">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.procurementprice" type="number"  @keyup.native.prevent="test(scope.$index,tableData,3)" placeholder="请输入内容"></el-input>
                <!-- <el-input v-model="result" placeholder="请输入内容"></el-input> -->
              </template>
            </el-table-column>
            <el-table-column prop="zip"  v-if="tablecheckeds.indexOf('待采购量')>-1"  label="待采购量" width="120">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.topurchasequantity" type="number"  @keyup.native.prevent="test(scope.$index,tableData,1)" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="zip"  v-if="tablecheckeds.indexOf('采购金额')>-1" label="采购金额" width="120">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.purchaseamount" type="number"    @keyup.native.prevent="test(scope.$index,tableData,2)" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="zip" v-if="tablecheckeds.indexOf('备注')>-1"  label="备注" width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" placeholder="请输入内容"></el-input>
            </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
            <div style="width: 100%;margin-bottom: 10px;text-align: right;padding-right: 20px;">合计(含税) :   <span style="color: red;">{{goodsPricecont}}</span></div>
            <div style="margin-bottom: 40px;">
              备注：<el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <div style="position: fixed;bottom: 0;background-color: #FFFFFF; width: 100%;line-height: 80px;z-index: 9;">
      <el-button @click="returnpre"  style="margin-left: 40px;" type="primary">保存</el-button>
      <el-button @click="returnpre" type="primary" plain>取消</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    computed:{
      goodsPricecont(){
        let cont = 0
        this.tableData.forEach((x)=>{
          cont = cont + parseFloat(x.purchaseamount)
        })
        return cont
      }
    }
    ,data() {
      return {
        tablecheckAll: ["序号","商品图片","商品","单位","近一次采购","采购询价","市场参考价","采购价","待采购量","采购金额","备注"],
        tablecheckeds: ["序号","商品图片","商品","单位","近一次采购","采购询价","市场参考价","采购价","待采购量","采购金额","备注"],
        tableforbid: ["序号","商品图片","商品","采购价","待采购量","采购金额"],
        drawer: false,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          procurementprice:0, //采购价
          topurchasequantity:0, //待采购量
          purchaseamount:0,//采购金额
          path:require("@/assets/skm.jpg"),
          remark:"",
        },{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          procurementprice:0, //采购价
          topurchasequantity:0, //待采购量
          purchaseamount:0,//采购金额
          path:require("@/assets/skm.jpg"),
          remark:""
        },{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          procurementprice:0, //采购价
          topurchasequantity:0, //待采购量
          purchaseamount:0,//采购金额
          path:require("@/assets/skm.jpg"),
          remark:""
        },{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          procurementprice:0, //采购价
          topurchasequantity:0, //待采购量
          purchaseamount:0,//采购金额
          path:require("@/assets/skm.jpg"),
          remark:""
        },{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          procurementprice:0, //采购价
          topurchasequantity:0, //待采购量
          purchaseamount:1,//采购金额
          path:require("@/assets/skm.jpg"),
          remark:""
        }],
      }
    },
    methods: {
      returnpre(){
        this.$router.push("/purchase/purchasingback")
      }
      ,deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      test(index,data,type){
        let res
        switch (type){
          case 3:
            res = data[index].procurementprice
            if(res == ""){
              data[index].procurementprice = 0
            }
              data[index].purchaseamount=(parseFloat(data[index].topurchasequantity)*parseFloat(data[index].procurementprice)).toFixed(2)
            break
          case 1:
            res = data[index].topurchasequantity
            if(res == ""){
              data[index].topurchasequantity = 0
            }
              data[index].purchaseamount=(parseFloat(data[index].topurchasequantity)*parseFloat(data[index].procurementprice)).toFixed(2)
            break
          case 2:
            res = data[index].purchaseamount
            if(res == ""){
              data[index].purchaseamount = 0
            }
            if(data[index].topurchasequantity === 0){
              data[index].topurchasequantity = 1
            }
              data[index].procurementprice=(parseFloat(data[index].purchaseamount)/parseFloat(data[index].topurchasequantity)).toFixed(2)
            break
        }
      }
    }
  }
</script>

<style>
  .purchasenote_add .el-date-editor.el-input {
    width: 100% !important;
  }
  .purchasenote_add .cell img{
    width: 50px;
    /* height: 100%; */
  }
  .purchasenote_add .cell input{
    padding-right: 0;
  }
  .purchasenote_add #el-drawer__title{
    border-bottom: 1px solid #f3f3f3
  }
/*  .purchasenote_add .el-main{
    height: 100% !important;
    overflow: auto !important;
  } */
</style>
